/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text,
    Toolbar,
    useTheme,
    Button,
    Container, IconCloud, InputLine, Input, useToast,
} from "customize-easy-ui-component";
import food from "../images/food.svg";
import { Link as RouterLink } from "../routing/Link";
import {PreloadedQuery, usePreloadedQuery} from "react-relay/hooks";
import {IspGuideQuery} from "./__generated__/IspGuideQuery.graphql";
import {AloneContainer} from "../comp/AloneContainer";

const graphql = require("babel-plugin-relay/macro");

interface IspGuideProps {
    id?: string;
    prepared: {
        query: PreloadedQuery<IspGuideQuery>;
    }
    children: React.ReactNode;
    routeData: any;
}

export default function IspGuide(props: IspGuideProps) {
    const toast = useToast();
    //getISP(id: $id) 可以用 node( id )替换! 没必要搞那么多接口函数啊。node() 替换掉：getISP(id: $id) {}
    const data = usePreloadedQuery<IspGuideQuery>(
        graphql`
            query IspGuideQuery($id: ID!) {
                node(id: $id) {
                    id,
                    ... on Isp { no,
                        bus{id,ident,task{id date status dep{id name}}}
                        conclusion,nextIspDate,
                        checkMen{id,username},
                        dev{id,cod,oid}, ispMen{id,username}
                        report{id,modeltype,modelversion}
                        reps {
                            edges {
                                node {
                                    id,type, path, stm{id,sta,due}
                                }
                            }
                        }
                    },
                    __typename
                }
            }
        `,
        props.prepared.query,
    );
    const { node:isp, }=data;
    const theme = useTheme();
    const [repId, setRepId] = React.useState(isp?.dev?.cod);
    const [repNo, setRepNo] = React.useState(isp?.dev?.oid);

    return (
        <AloneContainer>
            <form  method="post"
                   css={{
                        margin: 'auto',
                        background: "white"
                    }}
                   onSubmit={e =>{
                       e.preventDefault();  //阻止默认post://URL?
                       } }>

                <Text  variant="h5"　css={{ textAlign: 'center' }}>
                    <span>检验详情列表</span>
                </Text>
                <InputLine  label='报告编号' >
                    <Input  value={repNo!}  placeholder="那一份报告？"
                            onChange={e => setRepNo(e.currentTarget.value) } />
                </InputLine>

                <div css={{
                        margin: 'auto',
                     }}
                >
                    {isp?.id?
                        <React.Fragment>
                            <InputLine  label='报告ID' >
                                <Input  value={repId!}
                                        onChange={e => setRepId(e.currentTarget.value) } />
                            </InputLine>
                            <InputLine  label='其它的' >
                                <Input  value={isp?.no!}  placeholder="三月有效"
                                        onChange={e => void 0 } />
                            </InputLine>
                            {isp?.report?.id?
                                <RouterLink href={`/reportView/${isp?.report?.modeltype}/ver/${isp?.report?.modelversion}/${isp?.report?.id}`}>
                                    <Button
                                        size="lg" noBind
                                        intent="primary"
                                        variant="ghost"
                                        iconAfter={<IconCloud />}
                                    >
                                     搜到的主报告
                                    </Button>
                                </RouterLink>
                                :
                                <Text variant="h5" css={{ textAlign: 'center' }}>
                                   没搜到WEB报告,PDF吗
                                </Text>
                            }
                        </React.Fragment>
                        :
                        <Text variant="h5" css={{ textAlign: 'center' }}>
                            没找到此号
                        </Text>
                    }
                </div>
            </form>
        </AloneContainer>
  );
}

